/*
 * @Author: yangzonglong
 * @Date: 2021-06-30 15:14:10
 * @version: v1.0.0
 * @Descripttion: Upload 控制器
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-11-09 15:59:58
 * @Auditor:
 */
import React, { useState, useRef } from 'react';
import { Form, Button, Checkbox } from 'antd';
import Modal from '@library/components/modal/Modal';
import Jodit, { JoditRef } from './Jodit';
import { RichProps } from './RichText';
import useControlOptions from '../../hooks/useControlOptions';
import FormItemController from './../components/FormItemController';

const UploadController = () => {
  const { options, changeFormItemProps, changeControlProps } = useControlOptions<RichProps>('richProps');
  const [visible, setVisible] = useState(false);
  const [str, setStr] = useState('');
  const joditRef = useRef<JoditRef>(null);

  function show() {
    setVisible(true);
    setStr(options.richInitialValue || '');
  }

  function onOk() {
    const str = joditRef.current?.getValue();
    setVisible(false);
    changeOptions('richInitialValue', str || '');
  }

  function cancel() {
    setVisible(false);
    setStr('');
  }

  function changeOptions(k: string, v: any) {
    changeControlProps(k, v, true);
  }

  return (
    <>
      <FormItemController
        hidePlaceholder
        hideInitialValue
        hideRate
        onChange={changeFormItemProps}
        options={options?.formItemProps} />
      <Form.Item label='仅显示' className="antd-form-item-row">
        <Checkbox
          checked={options.preview}
          onChange={e => changeOptions('preview', e.target.checked)} />
      </Form.Item>
      <Button block onClick={show}>设置默认值</Button>
      <Modal
        destroyOnClose
        onOk={onOk}
        onCancel={cancel}
        width='1000px'
        title='默认值'
        visible={visible}>
        <Jodit ref={joditRef} initialValue={str} />
      </Modal>
    </>
  );
};

export default UploadController;
